<template>
    <div>
        <h4>发表评论</h4>
        <hr>
        <textarea rows="3" placeholder="请输入评论内容，最多输入120字" v-model='content'></textarea>
        <mt-button type="primary" size='large' @click='postContent'>发表评论</mt-button>
        <div>
            <div v-for='(item,i) in list' :key='i'>
                <div class='cmt-msg'>
                    <span>第{{i+1}}楼</span>
                    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | dataFormat}}</span>
                </div>
                <div class='cmt-con'>{{item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" size='large' @click='getMore'>加载更多</mt-button>
    </div>
</template>
<script>
    import {Toast} from 'mint-ui'
    export default {
        data() {
            return {
                list: [],
                page: 1,
                content:''
            }
        },
        created() {
            this.getCommList()
        },
        methods: {
            getCommList() {
                this.$http.get('api/getcomments/' + this.artId + '?pageindex=' + this.page).then(res => {
                    if (res.body.status == 0) {
                        this.list = this.list.concat(res.body.message)
                    } else {
                        Toast('获取评论失败')
                    }
                })
            },
            getMore(){
                this.page++;
                this.getCommList()

            },
            postContent(){
                if(this.content.trim().length==0){
                    Toast('评论不能为空')
                }
                this.$http.post('api/postcomment/'+this.artId,{content:this.content},{emulateJSON:true}).then(res=>{
                    if(res.body.status==0){
                        this.list.unshift({user_name:"匿名用户",add_time:new Date(),content:this.content})
                        this.content=''

                    }else{
                        Toast('发表评论失败')
                    }
                })
            }
        },
        props: ['artId']
    }
</script>
<style lang="scss" scoped>
    textarea {
        margin: 0;
    }
    .cmt-msg {
        font-size: 13px;
        line-height: 30px;
        background-color: #ccc;
    }
    .cmt-con {
        font-size: 14px;
        line-height: 30px;
        text-indent: 1em;
    }
</style>
